<script setup>

import Nav from "@/components/Nav.vue";
</script>

<template>
  <div>
    <Nav></Nav>
    <div style="overflow: hidden">
      <router-view v-slot="{ Component }" style="height: calc(100vh - 60px);background-color: #f5f7fa;overflow-y: auto">
        <transition name="fade-transform" mode="out-in">
          <component :is="Component"/>
        </transition>
      </router-view>
    </div>
  </div>
</template>

<style scoped>
/* 滑动页面切换动画 */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.3s;
  overflow-x: hidden;
}

.fade-transform-enter-from {
  opacity: 0;

  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>